<template>
  <div class="message-plugin">
    <!-- The following is displayed in the form of messageTip -->
    <div
      v-if="props.showStyle === 'tip'"
      class="message-plugin-tip"
    >
      <slot name="messageTip" />
    </div>
    <!-- The following is displayed in the form of messageBubble -->
    <div
      v-else-if="props.showStyle === 'bubble'"
      class="message-plugin-bubble-content"
      @longpress="handleToggleMessageItem($event, messageModel, true)"
      @click.prevent.right="handleToggleMessageItem($event, messageModel)"
      @touchstart="handleH5LongPress($event, messageModel, 'touchstart')"
      @touchend="handleH5LongPress($event, messageModel, 'touchend')"
      @mouseover="handleH5LongPress($event, messageModel, 'touchend')"
    >
      <MessageBubble
        :messageItem="messageModel"
        :content="messageModel.getMessageContent()"
        :blinkMessageIDList="props.blinkMessageIDList"
        :classNameList="props.bubbleClassNameList"
        :enableFeedback="props.enableFeedback"
        :enableAINote="props.enableAINote"
        @resendMessage="resendMessage(messageModel)"
        @like="onLike"
        @dislike="onDislike"
      >
        <!-- uni-app message-bubble is an anonymous slot, no slotName -->
        <slot
          name="messageBubble"
        />
      </MessageBubble>
    </div>
  </div>
</template>

<script lang="ts" setup>
import vue from '../../../../../adapter-vue';
import { TUIStore, IMessageModel } from '../../../../../@aidesk/uikit-engine';
import MessageBubble from '../message-bubble-uniapp.vue';
const { computed } = vue;
interface IProps {
  message: IMessageModel;
  showStyle: string;
  bubbleClassNameList?: string[];
  blinkMessageIDList?: string[];
  enableFeedback: number;
  enableAINote: number;
}

const props = withDefaults(defineProps<IProps>(), {
  message: () => ({} as IMessageModel),
  showStyle: '',
  bubbleClassNameList: () => [] as string[],
  blinkMessageIDList: () => [] as string[],
  enableFeedback: 0,
  enableAINote: 1,
});

const emits = defineEmits([
  'resendMessage',
  'handleToggleMessageItem',
  'handleH5LongPress',
  'like',
  'dislike',
]);
const messageModel = computed(() =>
  TUIStore.getMessageModel(props.message?.ID),
);

// The following is for external interaction such as messageTool, no special processing is required, do not change
const resendMessage = (message: IMessageModel) => {
  emits('resendMessage', message);
};
const handleToggleMessageItem = (
  e: any,
  message: IMessageModel,
  isLongpress = false,
) => {
  emits('handleToggleMessageItem', e, message, isLongpress);
};
const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
  emits('handleH5LongPress', e, message, type);
};
const onLike = (messageInfo: Object) => {
  emits('like', messageInfo);
};
const onDislike = (messageInfo: Object) => {
  emits('dislike', messageInfo);
};
</script>

<style lang="scss" scoped>
.message-plugin-tip {
  color: #999;
  font-size: 12px;
  overflow-wrap: anywhere;
  display: flex;
  place-content: center center;
  align-items: center;
  text-align: center;
  margin: 0 10px 10px;
}

.message-tip-highlight {
  animation: highlight 1000ms infinite;

  @keyframes highlight {
    50% {
      color: #ff9c19;
    }
  }

  @keyframes highlight {
    50% {
      color: #ff9c19;
    }
  }
}

:deep(.message-bubble-room) {
  .message-bubble-main-content {
    .message-body {
      .message-body-main {
        .message-body-content {
          &.content-in,
          &.content-out {
            background-color: transparent;
            border-radius: 0;
            padding: 0;
          }
        }
      }
    }
  }
}
</style>
